iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
3
自我挑戰組

sass&css 30天學習日誌系列 第 7

CSS: 偽元素應用- Step progress bar 進度條

  • 分享至 

  • xImage
  •  

進度條使用 ul和li搭配偽元素before和after,結果如下圖

https://ithelp.ithome.com.tw/upload/images/20200411/201073211cFX4hTWPh.png

流程如下:
1.排放li位置,使用偽元素放內容
2.使用計數器
3.加上線條
4.設定活動狀態

1.排放li位置,使用偽元素放內容

把li位置水平平移3等份,並設定相對定位讓元件以此為移動範圍,結果如下
html

<div class="container">
  <ul class="progress">
    <li class="active">step1</li>
    <li>step2</li>
    <li>step3</li>
  </ul>
</div>

css

.container {
  width: 100%;
}
.progress li {
  list-style-type: none;
  float:left;
  width: 33.33%;
  position:relative;
}

結果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321YGTiHVNyh8.png

建立偽元素,在content裡面放數字1

https://ithelp.ithome.com.tw/upload/images/20200411/20107321ReRiJzKGnD.png

li有些偏左使用,text-align和margin去調整,在此li:before不要跟li太緊密所以才用margin-bottom:10px去調整

https://ithelp.ithome.com.tw/upload/images/20200411/201073218OFb8b6eoH.png

2.使用計數器

現在要調整li偽元素的數字,要使用的是css計數器,要使用前要先重置數值,使用 counter-reset,把它放在ul裡面,並設定參數,在此叫做step,名稱可隨意命名
詳細使用可參照下面網址
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Counters

然後在下方的偽元素把content內容改為counter(step),括弧內step為剛命名的名稱
並搭配counter-increment使用,後面參數也是step,結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321wCu0oN2FmF.png

調整css後,外觀如下:

https://ithelp.ithome.com.tw/upload/images/20200411/201073218zjAXJQVKa.png

3.加上線條

可在li:after加上高度1px線條

https://ithelp.ithome.com.tw/upload/images/20200411/20107321IpNa0Myu5x.png

把li:before設定背景色就不會有穿線感覺

https://ithelp.ithome.com.tw/upload/images/20200411/201073216tpvemy3H7.png

step1左邊不應該有線條,在first-child:after設為空內容就消失了

https://ithelp.ithome.com.tw/upload/images/20200411/201073213ndjLp5fUy.png

4.設定活動狀態

在html的li已經有加入active的class,可先設定在li.active顯示為綠色

https://ithelp.ithome.com.tw/upload/images/20200411/20107321EPMg1Woec2.png

設定圓圈外框色,在active狀態下才變色

https://ithelp.ithome.com.tw/upload/images/20200411/20107321yQIqN4Nupi.png

在step1-step2之間的線條改綠色,也就是在active狀態下,li後面的線條也變色

https://ithelp.ithome.com.tw/upload/images/20200411/201073211L3Lhjte0q.png

如果不使用數字而是用icon也能用這個css

https://ithelp.ithome.com.tw/upload/images/20200411/20107321FXF10A7DQB.png

codepen: https://codepen.io/yuski/pen/VEPxbO
文章取材來源: https://www.youtube.com/watch?v=DYevj6UGNWA


上一篇
CSS: 偽元素應用- Ribbon緞帶
下一篇
CSS: 偽元素應用- 背景
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言